<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC的其他作用</title>
        <style>
            /* BFC可以取消盒子margin塌陷 */
             * {
                 margin: 0;
                 padding: 0;
             }
             p {
                 width: 200px;
                 height: 200px;
                 background-color: orange;
                 margin: 50px;
             }
             div {
                 overflow: hidden;
             }

            /* BFC可以阻止元素被浮动元素覆盖 */
             .s1 {
                 float: left;
                 width: 300px;
                 height: 300px;
                 background-color: red;
             }
             .s2 {
                 /* 此处若去掉浮动,则会被s1覆盖 */
                 /* float: left; */
                 width: 200px;
                 height: 200px;
                 background-color: blue;
             }
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
        
        <section class="s1"></section>
        <section class="s2"></section>
    </body>
</html>